import React, { Component } from 'react';
import { Table, Pagination, Dialog, Button, Grid, Select, DatePicker, NumberPicker, Input, Message } from '@alifd/next';
import { withRouter } from 'react-router-dom';
import IceContainer from '@icedesign/container';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import ChooseHead from '../chooseHead';
import PageHead from '../../../../components/PageHead';
import { getLocalTime } from '../../../../utils/localTime';
import service from '../../../../utils/service';
import api from '../../../../utils/api.js';

const { Row, Col } = Grid;

@withRouter
export default class goodList extends Component {
  state = {
    page: 1,
    w_id: '', // 当前仓库id
    isLoading: true,
    vipList: [], // 会员列表
    VipTypeList: [],
    SingleVipData: {}, // 详情
    countPage: 1, // 总页数
    perPage: 10, // 每页数据量
    filterData: {
      member_type: '',
      search: '',
      start_time: '',
      end_ime: '',
    }, // 筛选条件
    Bvisible: false, // 购买记录弹窗
    m_id: '', // 大单ID
    rPage: 1,
    b_count_page: '', // 记录中总页数
    b_per_page: 5,
    BuyList: [], // 购买列表
    isLoading2: true,
  };
  // 获取会员列表
  getVipList= () => {
    const data = this.state.filterData;
    data.page = this.state.page;
    service({
      method: 'get',
      url: api.VipStat,
      params: data,
    })
      .then((res) => {
        if (res.data.code === 200) {
          const vipList = res.data.list;
          vipList.forEach((item) => {
            if (item.birth_date) {
              item.birth_date = getLocalTime(item.birth_date);
            }
          });
          const countPage = res.data.count_page;
          this.setState(
            {
              vipList,
              countPage,
              isLoading: false,
            }
          );
        } else {
          Message.error(res.data.msg);
          this.setState(
            {
              isLoading: false,
            }
          );
        }
      });
  }
  // 获取购买记录
  getBuyList= () => {
    const m_id = this.state.m_id;
    service({
      method: 'get',
      url: api.VipBuyLog,
      params: {
        m_id,
        page: this.state.rPage,
      },
    })
      .then((res) => {
        if (res.data.code === 200) {
          const BuyList = res.data.list;
          BuyList.forEach((item) => {
            if (item.add_time) {
              item.add_time = getLocalTime(item.add_time);
            }
          });
          const b_count_page = res.data.count_page;
          this.setState(
            {
              BuyList,
              b_count_page,
              Bvisible: true,
              isLoading2: false,
            }
          );
        } else{
          Message.error(res.data.msg);
          this.setState(
            {
              isLoading2: false,
            }
          );
        }
      });
  }
  componentDidMount() {
    this.getVipList();
  }

  handlePaginationChange = (page) => {
    this.setState(
      {
        page,
        isLoading: true,
      },
      () => {
        this.getVipList();
      }
    );
  };
  handleBuyRecPaginationChange = (rPage) => {
    this.setState(
      {
        rPage,
        isLoading2: true,
      },
      () => {
        this.getBuyList();
      }
    );
  };
  handleFilterChange = (value) => {
    let start_time = '';
    let end_time = '';
    if (value.time) {
      if (value.time[0]) {
        start_time = new Date(value.time[0].toLocaleString()).toLocaleDateString();
      }
      if (value.time[1]) {
        end_time = new Date(value.time[1].toLocaleString()).toLocaleDateString();
      }
    }
    this.setState(
      {
        filterData: {
          search: value.search,
          member_type: value.member_type,
          start_time,
          end_time,
        },
        isLoading: true,
        page: 1,
      }, () => {
        this.getVipList();
      }
    );
  };

  handleBuyRecord = (record) => {
    this.setState(
      {
        m_id: record.id,
      }, () => {
        this.getBuyList();
      }
    );
  };
  onClose = () => {
    this.setState(
      {
        Bvisible: false,
      }
    );
  }
  handleDownload = () => {
    window.location.href = `${api.VipStat}?excel=1&search=${this.state.filterData.search}& member_type=${this.state.member_type}&start_time=${this.state.filterData.start_time}&end_time=${this.state.filterData.end_time}`;
  }
  renderOper = (value, index, record) => {
    return (
      <div>
        <a style={styles.link.detail} onClick={() => { this.handleBuyRecord(record); }}>
          购买记录
        </a>
      </div>
    );
  };

  render() {
    const { isLoading, vipList, page, countPage, perPage, BuyList, rPage, b_count_page, b_per_page, isLoading2 } = this.state;

    return (
      <div style={styles.container}>
        <ChooseHead filterChange={this.handleFilterChange} />
        <PageHead title="会员统计列表"  onClick={this.handleDownload} />
        <IceContainer>
          <Table loading={isLoading} dataSource={vipList} hasBorder={false} >
            <Table.Column title="会员ID" dataIndex="id" />
            <Table.Column title="会员类型" dataIndex="type_name" />
            <Table.Column title="会员编号" dataIndex="member_number" />
            <Table.Column title="会员姓名" dataIndex="member_name" />
            <Table.Column title="手机" dataIndex="phone" />
            <Table.Column title="当前积分" dataIndex="now_point" />
            <Table.Column title="累积积分" dataIndex="old_point" />
            <Table.Column title="购买总数" dataIndex="buy_count" />
            <Table.Column title="消费总额" dataIndex="con_amount" />
            <Table.Column title="储值金额" dataIndex="sto_amount" />
            <Table.Column title="操作" cell={this.renderOper} />
          </Table>
        </IceContainer>
        {/* 弹窗 */}
        <Dialog
          id="BDialog"
          visible={this.state.Bvisible}
          footerActions={[]}
          style={{ marginTop: '25px' }}
          onClose={this.onClose}
          footerAlign="center"
          footer={<div><Button type="primary" onClick={this.onClose} className="dialogButton EditBtn SubBtn">确定</Button></div>}
        >
          <div>
            <h3 className="titleWrap"><span className="dialogTitle">购买记录信息</span></h3>
            <IceContainer className="dialogContent" style={{ width: '1200px' }}>
              <Table loading={isLoading2} dataSource={BuyList} hasBorder={false} maxBodyHeight="600">
                <Table.Column title="单据ID" dataIndex="order_number" />
                <Table.Column title="订单类型" dataIndex="r_type" />
                <Table.Column title="分店名称" dataIndex="name" />
                <Table.Column title="购买数量" dataIndex="num" />
                <Table.Column title="成交时间" dataIndex="add_time" />
                <Table.Column title="成交金额" dataIndex="final_price" />
                <Table.Column title="销售员" dataIndex="user_name" />
                <Table.Column title="备注" dataIndex="remarks" />
              </Table>
              <Pagination
                style={styles.pagination}
                current={rPage}
                onChange={this.handleBuyRecPaginationChange}
                total={b_per_page * b_count_page}
              />
            </IceContainer>
          </div>
        </Dialog>
        <Pagination
          style={styles.pagination}
          current={page}
          onChange={this.handlePaginationChange}
          total={perPage * countPage}
        />
      </div>
    );
  }
}

const styles = {
  container: {
    padding: '0 0px 20px',
  },
  listTitle: {
    display: 'inline-block',
    textAlign: 'left',
    lineHeight: '40px',
    fontSize: '20px',
    color: '#333333',
    marginBottom: '20px',
  },
  link: {
    margin: '0 5px',
    color: 'rgba(49, 128, 253, 0.65)',
    cursor: 'pointer',
    textDecoration: 'none',
    edit: {
      color: '#8272EC',
      cursor: 'pointer',
    },
    detail: {
      color: '#5584FF',
      cursor: 'pointer',
    },
    delete: {
      color: '#FF3000',
      cursor: 'pointer',
    },
  },
  separator: {
    margin: '0 8px',
    display: 'inline-block',
    height: '12px',
    width: '1px',
    verticalAlign: 'middle',
    background: '#e8e8e8',
  },
  pagination: {
    marginTop: '20px',
    textAlign: 'center',
  },
  upload: {
    float: 'right',
    color: '#fff',
    backgroundImage: 'linear-gradient(90deg, #FFA20D 0%, #FF6E02 100%)',
    boxShadow: '0 -2px 6px 0 rgba(255,110,2,0.30)',
    borderRadius: '20px 20px 0 0',
    width: '124px',
    height: '40px',
    cursor: 'pointer',
    border: 'none',
    marginTop: '20px',
    icon: {
      cursor: 'pointer',
      fontSize: '16px',
      textAlign: 'left',
      lineHeight: '22px',
    },
  },
};
